<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .parent
       {
           width: 200px;
           height: 200px;
           background: red;
           /* position: relative; */
           
           left: 300px;
           top: 300px;

       }
       .child{

           width: 50px;
           height: 50px;
           background: blue;
           position: absolute;
           /* left: 100px;
           top: 100px; */
       }
    </style>
</head>
<body>
    <!-- 
        相对定位：就是元素在页面的上的正常位置
        通过left,top 可以改变的他的位置 尽量
        别用right bottom
     -->
    <!--
        1.绝对定位元素得位置是相对与最近的定位的父元素
        2.如果上级元素没有定位，那它的位置相对于整个html 


     -->
    <div class="parent">
        <div class="child"></div>

    </div>

</body>
</html>